<style>
  div.scroll {
    height: 200px;
    width: 300px;
    overflow: auto;
    border: 1px solid #666;
    background-color: #ccc;
    padding: 8px;
  }
</style>

<a id="start" href="a"><img src="resources/green.png" width=30px height=30px></a>
<div class="scroll" id="scrollerA">
  <a id="1" href="a"><img src="resources/green.png" width=30px height=35px></a>
  <div></div>
  <img src="resources/green.png" width=200px height=280px>
  <div></div>
  <a id="2" href="a"><img src="resources/green.png" width=30px height=30px></a>
</div>
<div class="scroll" id="scrollerB">
  <a id="3" href="a"><img src="resources/green.png" width=30px height=35px></a>
  <a id="4" href="a" style="margin-left: 400px"><img src="resources/green.png" width=30px height=35px></a>
</div>
<a id="5" href="a"><img src="resources/green.png" width=30px height=30px></a>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
  test(function(t) {
      assert_true(internals.runtimeFlags.keyboardFocusableScrollersEnabled);
  }, "Make sure KeyboardFocusableScrollers is set.");

  // We want spatnav to focus the scroller before scrolling
  // or searching inside of it, just like seqnav does.
  var resultMap = [
    ["Down", "scrollerA"],
    ["Down", "1"],
    ["Down", "1"],
    ["Down", "1"],
    ["Down", "1"],
    ["Down", "2"],
    ["Down", "2"],
    ["Down", "scrollerB"],
    ["Down", "3"],
    ["Right", "3"],
    ["Right", "3"],
    ["Right", "3"],
    ["Right", "4"],
    ["Down", "5"],
    ["Up", "scrollerB"],
    ["Up", "4"],
    ["Up", "scrollerA"],
    ["Up", "2"],
    ["Up", "2"],
    ["Up", "2"],
    ["Up", "2"],
    ["Up", "1"],
    ["Up", "1"],
    ["Up", "start"],
  ];

  // Start at a known place.
  document.getElementById("start").focus();
  snav.assertFocusMoves(resultMap);
</script>
